<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const props = defineProps(['tableData'])

const BarECharts = ref(null)
onMounted(() => {
  const colors = ['#73deb3', '#788ab0', '#f67b38', '#6dc8ec', '#9270ca', '#fa8c16', '#b37feb', '#ff0000']
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      color: ['#5b9bd5', '#ed7d31'],
      backgroundColor: '#FFF',
      grid: {
        top: 30,
        bottom: 40,
        left: '8%',
        right: '8%'
      },
      legend: {
        show:false,
        top: 10,
        itemWidth: 30,
        itemHeight: 6,
        data: ['产值', '产值同比', '产值环比', '近12月平均值']
      },
      xAxis: [
        {
          nameLocation: 'center',
          nameGap: 30,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCC'
            }
          },
          data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
        }
      ],
      yAxis: [
        {
          nameLocation: 'center',
          nameGap: 40,
          nameTextStyle: {
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#CCC'
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#CCC'
            }
          },
          axisLabel: {
            color: '#000'
          }
        },
        {

          nameLocation: 'center',
          nameGap: 40,
          nameTextStyle: {
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              color: '#CCC'
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#000'
          }
        }
      ],
      series: [
        {
          name: '产值',
          type: 'bar',
          barWidth: '20%',
          data: [23.71, 33.95, 43.25]
        },
        {
          name: '产值同比',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 1
          },
          lineStyle: {
            color: colors[0],
            width: 2
          },
          data: [28.65, 5.83, 18.34]
        },
        {
          name: '产值环比',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 1
          },
          lineStyle: {
            color: colors[1],
            width: 2
          },
          data: [-25.95, 26.54, 6.53]
        },
        {
          name: '近12月平均值',
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            opacity: 1
          },
          lineStyle: {
            color: colors[3],
            width: 2
          },
          data: [23.84, 64.2, 55.01]
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
